<template>
	<view class="categoryContainer">
		<view class="header">
			<input type="text" placeholder="搜索商品" />
		</view>
		<view class="categoryContent">
			<scroll-view scroll-y="true" class="left" >
				<view class="navItem " :class="{active:navId === navItem.id}" 
				v-for="navItem in categoryList" :key="navItem.id" @click="changNav(navItem.id)">
					<text>{{navItem.name}}</text>
				</view>
			</scroll-view>
			<scroll-view scroll-y="true" class="right">
				<view >
					<image :src="activeItem.imgUrl" class="banner"></image>
				</view>
				<view class="contentItem" v-for="(contentItem,index) in activeItem.subCateList" 
				:key="contentItem.id">
					<image :src="contentItem.wapBannerUrl" ></image>
					<text>{{contentItem.name}}</text>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {mapActions,mapState} from 'vuex'
	export default {
		data() {
			return {
				navId:0
			};
		},
		computed:{
			...mapState('categoryModule',['categoryList']),
			activeItem(){
				return this.categoryList.find(item=>item.id === this.navId)
			}
			
		},
		methods:{
			...mapActions('categoryModule',['getCateGoryDataAction']),
			changNav(id){
				this.navId = id
			},
		
		},
		async mounted(){
			await this.getCateGoryDataAction()
			this.navId = this.categoryList[0].id
			
		}
	}
</script>

<style lang="stylus">
	.categoryContainer
		.header
			width 100%
			height 56rpx
			margin 10rpx 0
			input
				width 95%
				height 100%
				margin 0 20rpx
				background #ededed
				border-radius 10rpx
				text-align center
				font-size 26rpx
		.categoryContent
			display flex
			width 100%
			height calc(100vh - 76rpx)
			.left
				width 20%
				height 100%
				.navItem
					position relative
					width 150rpx
					height 80rpx
					line-height 80rpx
					text-align center
					font-size 26rpx
				.active::before
						position absolute
						left 5rpx
						top 10%
						content ''
						height 80%
						width 2rpx
						background #bb2c08
			.right
				
				width 80%
				height 100%
			.banner
				width 560rpx
				height 190rpx
				margin 10rpx
			.contentItem
				display inline-block
				width 33.33333%
				height 176rpx
				text-align center
				image
					width 100%
					height 144rpx
				text
					font-size 26rpx
</style>
